import React, {memo, useRef, useEffect} from 'react';
import {
  View,
  StyleSheet,
  ImageBackground,
  Animated,
  Easing,
  TouchableOpacity,
} from 'react-native';
import { normalize } from '../utils/adapter';

type Props = {
  onDismiss?: () => void;
};

const RewardsBox = memo(({onDismiss}:Props): JSX.Element => {
  const rotationRef = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    Animated.timing(rotationRef, {
      toValue: 1,
      duration: 1000,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start();
  }, [rotationRef]);

  const rotateY = rotationRef.interpolate({
    inputRange: [0, 1],
    outputRange: ['180deg', '360deg'],
  });

  return (
    <Animated.View style={[{transform: [{rotateY}]}]}>
      <TouchableOpacity onPress={onDismiss} activeOpacity={1}>
        <ImageBackground
          style={styles.rewards_img_box}
          source={require('../assets/images/rewards.png')}
          resizeMode={'stretch'}
        />
      </TouchableOpacity>
    </Animated.View>
  );
});

const RewardsModal = function ({onDismiss}: Props): JSX.Element {
  return (
    <View style={styles.container}>
      <RewardsBox onDismiss={onDismiss}/>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  rewards_img_box: {
    width: normalize(287),
    height: normalize(388),
  },
});

export default RewardsModal;
